<!-- 买单 -->
<template>
  <app-layout>
    <view class="pay">
      <view class="pay-head">
        <!-- 消费总额 -->
        <view class="dir-left-nowrap cross-center pay-money">
          <view class="key">消费总额</view>
          <view class="money">
            <input class="pay-input" v-model="list.price" @input="testMoney" placeholder-style="color: #cdcdcd" placeholder="询问服务员后输入"/>
          </view>
        </view>
        <!-- 银米抵扣 -->
        <view class="dir-left-nowrap cross-center pay-yingmi">
          <view class="box-grow-1 cross-center dir-left-nowrap">
            <view class="key">银米抵扣(共{{yingmi.user_yingmi_num}}银米)</view>
            <view @click="getYingmiInfo" class="main-center cross-center">
              <icon class="pay-yingmi-icon" type=""></icon>
            </view>
          </view>
          <view class="box-grow-0 cross-center" @click="handleUseYingmi">
            <text class="red">-￥{{list.yingmi_deduction}}</text>
            <icon v-if="list.use_yingmi == 1" class="pay-yingmi-switch check" type=""></icon>
            <icon v-else class="pay-yingmi-switch uncheck" type=""></icon>
          </view>
        </view>
      </view>
      <view class="pay-remark cross-center">
        <view class="key">实付金额</view>
        <view class="value">￥{{list.pay_price}}</view>
      </view>
      <view class="pay-bottom" :class="{'isDisabled': list.price}" @click="submit">确认买单</view>
    </view>
  </app-layout>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      mch_id: '',
      yingmi: {
        user_id: 0,
        user_yingmi_num: '0',
      },
      list: {
        price: '',
        pay_price: 0.00,
        use_yingmi: 0,
        yingmi_deduction: 0,
      },
    }
  },
  onLoad(options) {
    let that = this;
    that.mch_id = options.mch_id; // 商铺id
    that.$showLoading({
      type: 'global',
      text: '加载中...'
    });
    that.$request({
      url: this.$api.user.user_info,
    }).then(response => {
      that.$hideLoading();
      if (response.code === 0) {
        that.yingmi.user_yingmi_num = response.data.options.yingmi;
        that.yingmi.user_id = response.data.options.user_id;
      }
    })
  },
  onShow() {},
  computed: {},
  methods: {
    testMoney(e) {
      let that = this;
      let price = e.detail.value
      if (price.indexOf(".") == 0) {
        // 首位小数点情况
        price = price.replace(/[^$#$]/g, "0.");
        price = price.replace(/\.{2,}/g, ".");
      }
      price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      // 重新赋值
      this.$nextTick(() => {
        that.list.price = price;
        that.calcYingmi();
        that.calcPrice();
      });
    },
    // 计算实付金额
    calcPrice: function () {
      let that = this;
      if(that.list.use_yingmi){
        let price_ = Number(that.list.price) - Number(that.list.yingmi_deduction);
        that.list.pay_price = Math.round(price_ * 100)/100;
      }else{
        that.list.pay_price = Number(that.list.price)
      }
    },
    // 使用银米抵扣
    handleUseYingmi() {
      const self = this;
      let list = self.list;
      list.use_yingmi = list.use_yingmi == 1 ? 0 : 1;
      self.calcYingmi();
      self.calcPrice();
    },
    // 可使用银米
    calcYingmi() {
      const self = this;
      let list = self.list;
      if(Number(list.price) > Number(self.yingmi.user_yingmi_num)) {
        list.yingmi_deduction = self.yingmi.user_yingmi_num;
      }else{
        list.yingmi_deduction = list.price;
      }
    },
    //银米抵扣说明
    getYingmiInfo: function (e) {
      let content = '银米可以直接抵扣金额';
      uni.showModal({
        title: '银米抵扣说明',
        content: content.trim(),
        showCancel: false
      })
    },
    // 确认买单
    submit() {
      const self = this;
      if (!self.list.price) return
      self.$showLoading({text: '正在提交'});
      self.$request({
        url: self.$api.scan_code_pay.submit,
        method: 'post',
        data: {
          user_id: self.yingmi.user_id, // 用户id
          mch_id: self.mch_id, // 商户id
          pay_price: self.list.pay_price, // 实付金额
          price: self.list.price, // 消费总额
          use_yingmi: self.list.use_yingmi, // 是否使用银米
          use_num: self.list.use_yingmi ? self.list.yingmi_deduction: 0, // 使用银米数量
          remark: '',
          use_integral: 0,
          coupon_id: 0
        },
      }).then(e => {
        self.$hideLoading();
        if (e.code === 0) {
          self.$payment.pay(e.data.pay_id).then(payMsg => {
            self.$store.commit('scanCode/mutSetUserCoupon', '');
            // 支付成功
            uni.showModal({
              title: '提示',
              content: "支付成功",
              showCancel: false,
              success() {
                uni.navigateTo({
                  url: '/pages/order-submit/pay-result?payment_order_union_id=' + e.data.pay_id + '&plugin=scan_code_pay'
                })
                self.clear = true;
              },
            });
          }).catch(payMsg => {
            // 支付失败
            self.$showLoading({text: '取消中'});
            self.$request({
              url: self.$api.scan_code_pay.cancel,
              data: {
                pay_id: e.data.pay_id,
              },
              method: 'POST',
            }).then(info => {
              self.$hideLoading();
            }).catch(info => {
              self.$hideLoading();
              uni.showModal({title: '提示', content: info.msg});
            })
          });
        } else {
          uni.showModal({title: '提示', content: e.msg});
        }
      }).catch(e => {
        self.$hideLoading();
      });
    }
  }
}
</script>

<style scoped lang="scss">
.pay {
  padding-bottom: #{40rpx};
  .pay-head {
    margin: #{30rpx} #{32rpx} #{24rpx} #{32rpx};
    background: #fff;
    border-radius: #{16rpx};
    padding: #{30rpx} #{20rpx};
    font-size: #{28rpx};
    .pay-money {
      padding-bottom: #{42rpx};
      border-bottom: 2upx solid #cdcdcd;
      justify-content: space-between;

      .pay-input {
        font-size: #{28rpx};
        text-align: right;
      }
    }
    .pay-yingmi {
      margin-top: #{42rpx};

      .pay-yingmi-icon {
        height: #{36rpx};
        width: #{36rpx};
        background-image: url("../../../static/image/icon/warning.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        margin-left: #{20rpx};
      }

      .pay-yingmi-switch {
        width: #{36rpx};
        height: #{36rpx};
        background-size: 100% auto;
        background-repeat: no-repeat;
      }

      .pay-yingmi-switch.check {
        margin-left: #{5rpx};
        background-image: url("../../../static/image/icon/icon-checkbox-checked-a.png");
      }

      .pay-yingmi-switch.uncheck {
        margin-left: #{5rpx};
        background-image: url("../../../static/image/icon/icon-uncheck.png");
      }
    }
  }

  .key {
    color: #333333;
    font-size: #{28rpx};
    font-weight: bold;
  }

  .pay-remark {
    height: 72upx;
    margin: 0 #{32rpx};
    padding: 0 #{20rpx};
    background: #FFFFFF;
    box-shadow: 0 2upx 2upx rgba(0, 0, 0, 0.1);
    opacity: 1;
    border-radius: 12upx;
    justify-content: space-between;

    .value {
      margin-left: #{10rpx};
      font-size: #{32rpx};
      font-weight: bold;
      color: #DE4335;
    }
  }
  .pay-bottom {
    height: 84upx;
    line-height: 84upx;
    color: #ffffff;
    font-size: 36upx;
    border-radius: 42upx;
    margin: 268upx 82upx 0;
    text-align: center;
    background: rgba(222, 67, 53, 0.5);
  }
  .isDisabled {
    background: rgba(222, 67, 53, 1);
    box-shadow: 0px 6px 12px rgba(222, 67, 53, 0.5);
  }
  .red {
    color: #DE4335;
    margin-right: #{10rpx};
  }
}

.pay-offer {
  color: #666666;
  font-size: #{28rpx};
  margin-top: #{40rpx};
  border-bottom:  #{2rpx} solid #cccccc;

  .coupon-right {
    padding-right: #{12rpx};
  }

  .icon-right {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url("../../../static/image/icon/arrow-right.png");
    width: #{12rpx};
    height: #{22rpx};
  }
}
</style>